<template>
    <div>
        <div class="title">热销推荐</div>
        <ul class="items">
            <li class="item" v-for="item of list" :key="item.id">
                <div class="item-left">
                    <img class="item-left-img" :src="item.imgUrl" alt="">
                </div>
                <div class="item-mid"></div>
                <div class="item-right">
                    <div class="item-right-title">{{item.title}}</div>
                    <div class="item-right-content">{{item.desc}}</div>
                    <button class="btn">查看详情</button>
                </div>
            </li>

        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
      list:Array
  }
}
</script>

<style lang="stylus" scoped>
      .items
        padding:.2rem 0
      .title
        margin-bottom:.2rem
        line-height:.8rem
        background: #eee
        text-indent:.2rem
      .item
        margin:0 1%
        width:98%
        display:flex
        margin-bottom:.3rem
        .item-left
            width:32%
            .item-left-img
                width:100%
        .item-mid
            flex:1
        .item-right
            position:relative
            width:65%
            .item-right-title
                font-size:.32rem
                line-height:.54rem
            .item-right-content
                color:#ccc
                line-height:.4rem

            .btn
                position:absolute
                line-height:.44rem
                bottom:0rem
                left:0
                background:#ff9300
                padding:0 .2rem
                border-radius:.06rem
                color:#fff
</style>
